<template>
  <div class='container-bigbox'>
   <!-- 筛选-->
   <!-- 卡片-->
   <el-card>
     <el-row>
       <!-- 表单 -->
       <el-col :span="18">
         <el-form label-width="80px" inline size="small">
         <el-form-item label="学科名称">
           <el-input v-model="reqParams.subjectName" placeholder="请输入关键字"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button @click="eliminate()" >清除</el-button>
           <el-button type="primary" @click="search()" >查询</el-button>
         </el-form-item>
         </el-form>
       </el-col>
       <!-- 添加学科按钮 -->
       <el-button @click="openDialog()" type="success" size="small" icon="el-icon-edit" style="float:right" >添加学科</el-button>
       <el-col :span="6"></el-col>
     </el-row>
    <!-- 总条数-->
    <el-alert show-icon :closable="false" :title="`总条数 ${total}条`" type="info" style="margin-bottom: 10px"></el-alert>
    <!-- 表格-->
    <el-table :data="subjects" >
      <el-table-column label="序号" :index="indexMethod" type="index" ></el-table-column>
      <el-table-column label="学科名称" prop="subjectName"></el-table-column>
      <el-table-column label="创建者" prop="username"></el-table-column>
      <el-table-column label="创建日期" width=160px>
        <template slot-scope="scope">
          {{scope.row.addDate|parseTimeByString}}
        </template>
      </el-table-column>
      <el-table-column label="前台是否显示">
          <template slot-scope="scope">
          {{scope.row.isFrontDisplay===1? '是':'否'}}
        </template>
      </el-table-column>
      <el-table-column label="二级目录" prop="twoLevelDirectory"></el-table-column>
      <el-table-column label="标签" prop="tags"></el-table-column>
      <el-table-column label="题目数量" prop="totals"></el-table-column>
      <el-table-column label="操作" width="240px" fixed="right">
        <template slot-scope="scope">
            <el-link @click="deClassIfIcation(scope.row)" :underline="false" type="primary">学科分类</el-link>
            <el-link @click="DeLaBel(scope.row)" :underline="false" type="primary">学科标签</el-link>
            <el-link @click="openDialog(scope.row)" :underline="false" type="primary">修改</el-link>
            <el-link @click="deleteSubjects(scope.row)" :underline="false" type="primary">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器-->
    <el-pagination
    class="pager"
    background
    layout="prev, pager, next,sizes,jumper"
    :total="total"
    :page-size="reqParams.pagesize"
    :current-page="reqParams.page"
    @current-change='changePager'
    @size-change="changeSize"
    :page-sizes='[5,10,20,50]'
    ></el-pagination>
    <!-- 页码选择 -->
   </el-card>
   <!-- 添加学科弹框 -->
    <subjects-add ref="subjectsadd" :data="currSubject" @updateList="updateList()"></subjects-add>
  </div>
</template>

<script>
import { list as subjectsList, remove as subjectsRemove } from '@/api/hmmm/subjects.js'
import SubjectsAdd from '../components/subjects-add'
export default {
  name: 'subjects-page',
  components: { SubjectsAdd },
  data () {
    return {
      // 筛选参数
      reqParams: {
        // 学科名称，关键字
        subjectName: null,
        // 页码
        page: 1,
        // 尺寸
        pagesize: 5
      },
      // 学科列表
      subjects: [],
      // 总条数
      total: 0,
      // 添加学科弹框
      currSubject: {}
    }
  },
  created () {
    this.getSubjects()
  },
  methods: {
    // 删除学科按钮
    deleteSubjects (row) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '友情提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await subjectsRemove(row)
        this.$message.success('删除学科成功')
        console.log(this.getSubjects())
      }).catch(e => {})
    },
    // 学科标签跳转标签
    DeLaBel ({ id, subjectsName: name }) {
      this.$router.push({ path: 'tags', query: { id, name } })
    },
    // 学科分类跳转目录
    deClassIfIcation ({ id, subjectsName: name }) {
      this.$router.push({ path: 'directorys', query: { id, name } })
    },
    // 新增|修改 后更新列表
    updateList () {
      if (!this.currSubject.id) {
        this.reqParams.page = 1
      }
      this.getSubjects()
    },
    // 打开 新增|修改 对话框
    openDialog (subject) {
      this.currSubject = subject || {}
      this.$nextTick(() => {
        this.$refs.subjectsadd.open()
      })
    },
    // 获取学科列表请求
    async getSubjects () {
      // 获取相关信息
      const { data } = await subjectsList(this.reqParams)
      // console.log(data)
      // 数据赋值
      this.subjects = data.items
      this.total = data.counts
    },
    // 分页
    changePager (newPage) {
      this.reqParams.page = newPage
      this.getSubjects()
    },
    // 改变尺码的条数是发送请求
    changeSize (newSize) {
      // 改变时尺码来到第一页
      this.reqParams.page = 1
      // 让每页的条数发生相应的变化
      this.reqParams.pagesize = newSize
      // 重新渲染
      this.getSubjects()
    },
    // 搜索按钮
    search () {
      this.reqParams.page = 1
      // 重新渲染
      this.getSubjects()
    },
    // 清除按钮
    eliminate () {
      // 清空
      this.reqParams.subjectName = null
      // 回到第一页
      this.reqParams.page = 1
      // 重新渲染
      this.getSubjects()
    },
    // 添加学科弹框
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 自定义索引
    indexMethod (index) {
      return index + 1 + (this.reqParams.page - 1) * this.reqParams.pagesize
    }

  }
}
</script>

<style scoped lang='scss'>
.container-bigbox{
  padding: 10px 15px;
  .pager{
    margin: 15px 0;
    float: right;
  }
}
.el-link{
margin-right: 10px;
}
</style>
